<template>
	<view>
		<view class="box">
			<view class="menu_content_box">
				<view class="re">
					<!--轮播图-->
					<swiper class="swiper_focus" :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration" :indicator-color="indicatorColor"
						:indicator-active-color="indicatorActiveColor" :circular="circular" @change="onswiperChange">
						<swiper-item v-for="(item ,index) in detail.headImgList" :key="index">
							<image :lazy-load="true" :src="item" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
					<!--轮播图-->
					<view class="swiper_serial_number">{{index}}/{{detail.headImgList.length}}</view>
					<!-- 返回-按钮 -->
					<view class="back_btn_pos" @tap="back">
						<image :lazy-load="true" src="/static/icon_arrow_3.png" class="img9"></image>
					</view>
				</view>

				<view class="pt30 pb30 pl30 pr30 bgf">
					<view class="fwb cor_F23"><text class="fs30">￥</text><text class="fs42">{{detail.price}}</text>
					</view>
					<view class="mt25 fs32 fwb cor_000">{{detail.title}}</view>
				</view>

				<view class="mt20 pl35 pr35 flex_box aic">
					<image :lazy-load="true" src="/static/icon_security_3.png" class="img5"></image>
					<view class="ml10 fs24 cor_000">技术资料不支持退款</view>
				</view>

				<view class="pl15 pr15">
					<view class="mt20 area_block_1 pt20 pb20" v-if="!userInfo.beMember && !isIos && !hideMember"
						@tap="openVip">
						<view class="flex_box aic">
							<image :lazy-load="true" src="/static/icon_fire.png" class="ml20 img7"></image>
							<view class="item ov">
								<view class="ml10 fs24 cor_000 ell">购买会员可以查阅所有资料更实惠</view>
							</view>
							<view class="ml10 see_btn">查看详情</view>
						</view>
					</view>
					<!-- 评价 -->
					<view class="mt20 pl20 area_block_1" v-if="detail.commentInfo.num">
						<view class="flex_box aic" style="min-height: 140rpx;">
							<view class="item fs32 cor_000">评价（<text class="">{{detail.commentInfo.num}}</text>）</view>
							<view class="see_btn" @tap="toAllComment">查看全部</view>
						</view>
						<view class="pl10 pr30">

							<view class="pt25 pb25" v-for="item,index in detail.commentInfo.commentList" :key="index"
								v-if="detail.commentInfo.commentList.length > 0">
								<view class="flex_box aic">
									<view class="mr20 re">
										<image :lazy-load="true" :src="item.userIcon" class="vt img24"></image>
									</view>
									<view class="item">
										<view class="flex_box aic">
											<view class="item">
												<view class="fs24 cor_000">{{item.userName}}</view>
											</view>
											<view class="fs24 cor_808">{{item.date}}</view>
										</view>
										<view class="mt15 df aic">
											<uni-rate :value="item.stars" allow-half :readonly="true" color="#bbb"
												:size="12" active-color="red" />
										</view>
									</view>
								</view>
								<view class="mt20 fs24 lh38 cor_000">{{item.text}}</view>
							</view>

						</view>
					</view><!-- 评价 -->

				</view>

				<!-- 资料介绍 -->
				<view class="mt40">
					<view class="df aic jcc">
						<view class="line_hor_sty"></view>
						<view class="ml25 mr25 fs32 fwb cor_000">资料介绍</view>
						<view class="line_hor_sty"></view>
					</view>
					<view class="mt40 pa20 bgf" style="min-height: 200rpx;">
						<view class="fs28 lh38 cor_000">
							{{detail.introduce}}
						</view>
					</view>
				</view><!-- 资料介绍 -->

			</view>

			<!-- 立刻咨询-按钮 -->
			<view class="flex_box aic">
				<!-- 	<view class="item">
					<view class="new_btn_1" @tap="buyNow">单独购买</view>
				</view>
				<view class="item">
					<view class="new_btn_2" @tap="openVip">办理会员</view>
				</view>
				 -->
				<view class="item" v-if="!userInfo.beMember && !detail.canBeBrowse">
					<view class="new_btn_1" @tap="buyNow">单独购买</view>
				</view>
				<view class="item" v-if="!userInfo.beMember && !detail.canBeBrowse && !isIos && !hideMember">
					<view class="new_btn_2" @tap="openVip">办理会员</view>
				</view>

				<view class="item" v-if="detail.canBeBrowse">
					<view class="new_btn_1" @tap="readNow">浏览</view>
				</view>
				<view class="item" v-if="detail.canBeEvaluate">
					<view class="new_btn_2" @tap="commemt">评论</view>
				</view>
			</view>

		</view><!-- box -->

	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		getDatumDetailPageApi,
		beHideMemApi
	} from '@/http/api.js';
	export default {
		data() {
			return {
				imgUrls: [
					'/static/banner_2.png',
					'/static/banner_2.png',
					'/static/banner_2.png'
				],
				autoplay: true,
				interval: 3000,
				duration: 300,
				indicatorDots: false,
				circular: true,
				indicatorColor: '#fff',
				indicatorActiveColor: '#0692ff',
				autoplayNews: true,
				intervalNews: 3000,
				durationNews: 300,
				index: "1", //轮播当前序号
				id: 0,
				userId: uni.getStorageSync('userId'),
				userInfo: uni.getStorageSync('userInfo'),
				detail: {
					id: 0,
					title: '',
					introduce: '',
					price: 0,
					num: 0,
					canBeEvaluate: false,
					canBeBrowse: false,
					headImgList: [],
					commentInfo: {
						num: 0,
						commentList: [{
							userIcon: '',
							userName: '',
							text: '',
							date: '',
							stars: 0
						}]
					}
				},
				isIos: false,
				hideMember: false
			}
		},
		onLoad(options) {
			if (!uni.getStorageSync('userId')) {
				uni.reLaunch({
					url: '/pages/Sign_in/Sign_in'
				})
			}
			this.id = options.id;
			this.getDatumDetailPage();
			if (uni.getSystemInfoSync().platform == 'ios') {
				this.isIos = true;
				this.beHideMem();
			}
		},
		methods: {
			getDatumDetailPage() {
				let that = this;
				showLoading('加载中');
				getDatumDetailPageApi({
					id: this.id,
					userId: this.userId
				}).then(res => {
					that.detail = res.data;
					hideLoading();
				}).catch(err => {
					toast(err.msg);
					hideLoading();
				})
			},

			beHideMem() {
				showLoading('加载中');
				let that = this;
				beHideMemApi({}).then(res => {
					that.hideMember = res.data
					hideLoading();
				}).catch(err => {
					toast(err.msg);
					hideLoading();
				})
			},

			onswiperChange: function(e) {
				this.index = e.detail.current + 1
			},

			back() {
				uni.navigateBack({
					delta: 1
				})
			},

			toAllComment() {
				uni.navigateTo({
					url: '/pages/all_comments/all_comments?id=' + this.id
				})
			},

			readNow() {
				if (this.detail.beVideo) {
					uni.navigateTo({
						url: '/pages/database/readvideo?id=' + this.id + '&beVideo=' + this.detail.beVideo + '&title=' +
							this.detail.title
					})
				} else {
					uni.navigateTo({
						url: '/pages/database/readhtml?id=' + this.id + '&beVideo=' + this.detail.beVideo + '&title=' +
							this.detail.title
					})
				}
				
			},

			//购买资料
			buyNow() {
				let url = '/pages/order_payment/order_payment?type=2&title=' + this.detail.title + '&id=' + this.detail.id;
				uni.navigateTo({
					url: url
				})
			},

			//开通会员
			openVip() {
				uni.navigateTo({
					url: '/pages/my_members/my_members'
				})
			},

			//评论当前资料
			commemt() {
				uni.navigateTo({
					url: '/pages/evaluation_page/evaluation_page?id=' + this.detail.id
				})
			}
		}
	}
</script>

<style>
	.menu_content_box {
		position: relative;
		height: calc(100vh - 163rpx);
		background-color: #f6f6f6;
		margin-top: 65rpx;
	}

	.swiper_focus {
		width: 100%;
		height: 690rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.swiper_focus image {
		height: 100%;
		width: 100%;
	}

	.swiper_serial_number {
		position: absolute;
		bottom: 23rpx;
		right: 30rpx;
		width: 90rpx;
		height: 46rpx;
		line-height: 46rpx;
		color: #fff;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		background: rgba(0, 0, 0, .23);
		border-radius: 23rpx;
		z-index: 2;
	}

	.back_btn_pos {
		position: absolute;
		top: 41rpx;
		left: 29rpx;
		width: 64rpx;
		height: 64rpx;
		z-index: 3;
	}

	.area_block_1 {
		background-color: #fff;
		border-radius: 20rpx;
	}

	.see_btn {
		padding: 0 12rpx;
		height: 48rpx;
		line-height: 48rpx;
		font-size: 22rpx;
		color: #fff;
		text-align: center;
		background-image: linear-gradient(90deg, #f46933, #e3140b);
		border-radius: 24rpx 0 0 24rpx;
	}

	.line_hor_sty {
		width: 174rpx;
		height: 1px;
		background-color: #b6b6b6;
	}

	.new_btn_1,
	.new_btn_2 {
		display: block;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
	}

	.new_btn_1 {
		color: #fff;
		background: linear-gradient(90deg, #f44f33, #e10d09);
	}

	.new_btn_2 {
		color: #FBCC90;
		background: linear-gradient(90deg, #443d33, #332e28);
	}
</style>
